<template>
  <div @scroll="scroll">
    <col-header v-show="show"></col-header>
    <div class="box">
      <swiper :banners="banners" autoplay></swiper>
      <!-- v-model 在input不是复选框时 
      v-model是 @input和v-bind的集合
      当input是复选框时 v-model是@change和v-bind的集合

      当v-model和select标签合用的时候 也是@change和v-bind的集合
      v-bind的属性就是value
       -->
      <!-- <my-input text="password" v-model="content" placeholder="请输入"></my-input> -->
      <my-button type="primary">点击</my-button>
      <span class="iconfont iconleft-arrow"></span>
    </div>
  </div>
</template>

<script>
import colHeader from '@/components/ColHeader/colHeader'
import swiper from '@/components/Swiper/swiper'
import myInput from '@/components/MyInput/myInput'
import myButton from '@/components/MyButton/myButton'
import { getBanners } from '@/utils/api/api'
export default {
  name: '',
  components: {
    colHeader,
    swiper,
    myInput,
    myButton
  },
  data() { 
    return {
      show: false,
      banners: [],
      content: ''
    }
  },
  created() {
    this.$nextTick(() => {
      console.log(document.getElementsByClassName('box')[0]);
    })
    getBanners().then(res => {
      // console.log(res);
      this.banners = res.data
    })
  },
  methods:{
    // 定义滚动事件
    scroll(e) {
      this.show = e.target.scrollTop > 400 ? true : false
    }
  },

  watch: {
    content() {
      console.log(this.content);
    }
  }
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 2000px;
}
</style>